<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>雪碧图的应用</title>
	<style type="text/css">
		.sprite {
			display:inline-block; 
			width: 96px;
			height: 96px;
			background: url("http://coding.imweb.io/img/p2/sprite-base.png") no-repeat;  /* 设置背景 */
		}
		.happy {
			background-position: 0 0;   /* 设置图标位置 */
		}
		.cry	 {
			background-position: -192px -96px;   /* 设置图标位置 */
		}
	</style>
</head>
<body>
	<h1>雪碧图的应用</h1>
	<h2>开心表情</h2>
	<div class="sprite happy"></div>
	<h2>哭泣表情</h2>
	<div class="sprite cry"></div>
</body>
</html>

